<template>
  <el-container class="app-container">
    <el-collapse @change="handleCollapseChange" v-model="collapseActiveName">
      <el-collapse-item :title="collapseTitle" name="1">
        <el-tabs type="border-card">
          <el-form :model="pageInfo" ref="form" label-width="130px" size="medium">
            <el-row>
              <el-col :span="8" :offset="0">
                <el-form-item prop="title" label="会议室名称：">
                  <el-input v-model.trim='pageInfo.title' placeholder="请输入名称搜索"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="0">
                <el-form-item prop="title" label="会议室所属空间：">
                  <el-input v-model.trim='pageInfo.title' placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="6" :offset="1">
                <el-button type="primary" icon="el-icon-search" @click='getData'>搜索</el-button>
                <!--                  <el-button @click="resetForm">重置</el-button>-->
              </el-col>
            </el-row>
          </el-form>
        </el-tabs>
      </el-collapse-item>
    </el-collapse>
    <el-header class="m-t-20">
      <el-button type="primary" icon="el-icon-plus" @click="addOne">会议室</el-button>
    </el-header>

    <!--表格-->
    <table-view
      :editBtnMap="true"
      :imglist="{mainImage: true}"
      :editBtnMapList="editBtnMapList"
      :columns="tableContent"
      :pageList="columnData"
      @edit-btnclick="editBtnClick"
      :templateDiv="{itemMessage:true,salePrice:true,totalStock:true,operation:true}"
      @sort-change="handleSort"
    >
      <template slot="itemMessage" slot-scope="scope">
        <el-row class="table-item-message">
          <el-col :span="5"><img :src="scope.row.mainImage" alt="" class="item-image"></el-col>
          <el-col :span="18" class="item-title">{{scope.row.title}}</el-col>
        </el-row>
      </template>
    </table-view>

    <!--分页-->
    <pagination-view :pagesize="pageInfo.pageSize"
                     :currentPage="pageInfo.pageNumber"
                     :total="total"
                     @size-change="sizeChange"
                     @current-change="pageChange"
    ></pagination-view>
    <el-footer></el-footer>
  </el-container>
</template>

<script>
  import TableView from '@/components/TableView'
  import ImgUpload from '@/components/ImgUpload'

  import PaginationView from '@/components/PaginationView'
  // import pageApi from '@/api/operation/productSetting'

  export default {
    name: 'list',
    components: {
      TableView,
      PaginationView,
      ImgUpload
    },
    data() {
      //
      return {
        tableContent: [{
          field: 'productName',
          label: '图片'
        }, {
          field: 'productName',
          label: '会议室名称'
        }, {
          field: 'intro',
          label: '面积（㎡)',
          sortable: true
        }, {
          field: 'intro',
          label: '收费（元/小时)',
          sortable: true
        }, {
          field: 'intro',
          label: '最小预定时间',
          sortable: true
        }, {
          field: 'intro',
          label: '累计预定时间 ',
          sortable: true
        }, {
          field: 'intro',
          label: '所属办公空间',
        }, {
          field: 'intro',
          label: '状态',
        }, {
          field: 'memo',
          label: '备注'
        }],
        columnData: [{}, {}],
        editBtnMapList: ['update', 'view', 'delete'],  //自定义的按钮内容
        customWidth: '',
        pageInfo: {
          pageNum: 1,
          pageSize: 20,
          title: ''
        },
        total: 0,
      }
    },
    watch: {},
    methods: {
      handleSort({prop, order}) {
        //1售价 2销量 3库存 4积分
        const orderByFilter = {
          salePrice: 1,
          salesCount: 2,
          totalStock: 3,
        }
        this.pageInfo.orderBy = orderByFilter[prop]
        this.pageInfo.sortType = (order === 'ascending' ? 0 : 1)
        this.getData()
      },

      addOne() {
        this.$router.push({name:'meetingRoomAdd'})
      },

      changeUserStatus: function (id, enable) {
        pageApi.changeEnable(id, enable).then((res) => {
          this.handleMessage(res)
          if (res.code === '200') this.getData()
        })
      },
      onSubmit() {
        let form = this.form
        let dialogType = this.dialogType
        form.duration = form.durationTime + (form.productTypeId == 1 ? '个月' : '天')
        form.enable = Number(form.enable)
        this.$refs['form'].validate((valid) => {
          if (valid) {
            switch (dialogType) {
              case 'add':
                this.dialogTitle = '添加'
                pageApi.create(form).then(res => {
                  this.handleRes(res)
                })
                break
              case 'update':
                this.dialogTitle = '编辑'
                pageApi.update(form).then(res => {
                  this.handleRes(res)
                })
                break
            }
          }
        })
      },
      handleRes(res) {
        this.handleMessage(res)
        if (res.code === '200') {
          this.dialogVisible = false
          this.getData()
        }
      },
      // pageSize变化函数
      sizeChange(val) {
        this.pageInfo.pageSize = val
        this.getData()
      },
      // page变化函数
      pageChange(val) {
        this.pageInfo.pageNumber = val
        this.getData()
      },
      editBtnClick(val, index, type) {
        switch (type) {
          case 'update':
            pageApi.getById(val.courseProductId).then(res => {
              this.form = Object.assign({}, this.form, res.body)
              let duration = this.form.duration
              let regExp = this.form.productTypeId == 1 ? /个月/ : /天/
              this.form.durationTime = duration.replace(regExp, '')

            })
            this.dialogType = type
            this.dialogVisible = true
            break
          case 'switchStatus':
            this.changeUserStatus(val.courseProductId, val.enable ? 0 : 1)
            break
          case 'delete':
            break

        }
      },
      //拉取列表
      getData() {
        pageApi.getList(this.pageInfo).then(res => {
          this.columnData = res.body.records
          this.total = Number(res.body.total)
          this.pageInfo.pageNumber = Number(res.body.pageNumber) || 1
        })
      },
      handleClose(done) {
        let resetForm = {
          costAmount: '',
          courseProductId: '',
          duration: '',
          durationTime: '',
          enable: true,
          intro: '',
          memo: '',
          productName: '',
          saleAmount: '',
          sort: '',
          tag: ''
        }
        this.form = Object.assign({}, this.form, resetForm)
        done()
      }

    },
    mounted() {
      // addr: "浙江省杭州市萧山区金惠路685号"
      // city: "杭州市"
      // latng: "30.185281,120.26323"
      // module: "locationPicker"
      // name: "杭州市萧山区委杭州市萧山区人民政府信访局"
      // show: "true"
      let {addr, latng, name, show, dialogTitle} = this.$route.query
      this.form.addressDetail = addr
      this.form.addressName = name
      this.dialogTitle = dialogTitle
      if (show) {
        this.dialogVisible = true
      }
      this.getData()
    }
  }
</script>

<style lang="scss" scoped>

</style>
